<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <%--引入element的js--%>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <%--引入elementui的样式--%>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-form :inline="true" :model="staffvo" class="demo-form-inline">
    <el-form-item label="编号">
      <el-input v-model="staffvo.staffId" placeholder="请输入员工编号"></el-input>
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="staffvo.staffName" placeholder="请输入员工姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-table
          :data="staffs"
          border
          style="width: 100%">
    <el-table-column
            prop="staffid"
            label="员工编号"
    >
    </el-table-column>
    <el-table-column
            prop="staffname"
            label="员工姓名"
    >
    </el-table-column>
    <el-table-column
            prop="idcard"
            label="身份证号码">
    </el-table-column>
    <el-table-column
            prop="staffsal.staffSal"
            label="职位基本工资">
    </el-table-column>
    <el-table-column
            prop="staffsal.staffComm"
            label="工资提成">
    </el-table-column>

    <el-table-column
            prop="staffsal.staffBonus"
            label="奖金">
    </el-table-column>
    <el-table-column
            prop="staffsal.staffDeductmoney"
            label="罚款">
    </el-table-column>
    <el-table-column
            prop="staffsal.sendDate"
            label="发放的时间">
    </el-table-column>
    <el-table-column
            prop="staffsal.count"
            label="总工资">
    </el-table-column>
    <el-table-column
            prop="state"
            label="状态">
      <template slot-scope="scope">
        <el-tag
                type="success"
                v-if="scope.row.state==1"
                effect="dark">
          工作状态
        </el-tag>
        <el-tag
                type="info"
                v-else
                effect="dark">
          冻结状态
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
            width="200">
      <template slot-scope="scope">
        <el-button @click="deleterole(scope.row)" type="primary" size="small">删除</el-button>
        <el-button @click="handleEdit(scope.row)" type="primary" size="small">发放</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
  </el-dialog>
  <el-dialog title="发放工资 " :visible.sync="dialogFormVisible2" width="500px">
    <el-form :model="editForm" <%--:rules="addRule"--%> ref="aaa">
      <el-form-item label="基本工资" label-width="80" prop="staffSal">
        <el-input v-model="editForm.staffSal" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="工资提成" label-width="80" prop="staffComm">
        <el-input v-model="editForm.staffComm" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="奖金" label-width="80" prop="staffBonus">
        <el-input v-model.number="editForm.staffBonus" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="罚款" label-width="80" prop="staffDeductmoney">
        <el-input v-model="editForm.staffDeductmoney" autocomplete="off"></el-input>
      </el-form-item>
      </el-form-item>
      <el-form-item label="发放的时间" label-width="90" prop="sendDate">
        <el-date-picker type="date" placeholder="选择日期" v-model="editForm.sendDate"
                        style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>

      </el-form-item>
    <%--  <el-form-item label="总工资" label-width="80" prop="count">
        <el-input v-model="editForm.count" autocomplete="off"></el-input>
      </el-form-item>--%>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="editusers">确 定</el-button>
    </div>
  </el-dialog>

</div>
</body>
<script>
  let app=new Vue({
    el: "#app",
    data: {
      //搜索表单对象
      staffForm: {},
      //员工表格的数据
      staffs: [],
      //当前的页码
      current: 1,
      //每页的条数
      pageSize: 5,
      //总条数
      total: 0,
      /*控制添加页面显示和隐藏*/
      dialogFormVisible: false,
      /*控制编辑页面显示和隐藏*/
      dialogFormVisible2: false,
      /*修改*/
      editForm: {},
      staffvo:{
        staffId:"",
        staffName:"",
      }
    },
    created() {
      this.loadTable();
    },
    methods: {
      // 编辑员工信息
      editusers() {
        axios.post("/sal/update/"+this.editForm.id,this.editForm).then(res => {
          if(res.data.code===200){
            this.$refs.aaa.resetFields();
            this.dialogFormVisible2 = false;
            this.$message.success("修改成功")
            this.loadTable()
          }

        })

      },
      handleEdit(row) {
        this.dialogFormVisible2 = true;
        this.editForm = row;
      },
      search() {
        this.staffId=""
        this.staffName=""
        this.loadTable()
      },
      //初始化员工表格数据
      loadTable() {
        axios.post("/staff/all/" + this.current + "/" + this.pageSize, this.staffvo).then(result => {
          console.log(result)
          this.staffs = result.data.data.list;
          this.total = result.data.data.total;
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadTable();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.loadTable();
      },
      //删除
      deleterole(row) {
        console.log(row);
        axios.post("/staff/delete/" + row.id)
                .then(result => {
                  // 删除成功后重新加载表格数据
                  this.loadTable();
                  this.$message.success('删除成功');
                })
                .catch(error => {
                  console.error('删除失败', error);
                  this.$message.error('删除失败');
                });
      },
    }
    })

</script>
</html>

